import React from 'react';
import ReactDOM from 'react-dom';
import mirror, {actions, connect} from 'mirrorx';
import {List, Button, WhiteSpace, WingBlank } from 'antd-mobile';

import { FormattedMessage} from 'react-intl';

const Item = List.Item;
const Brief = Item.Brief;

if (!actions.billInfo) {   
    mirror.model({
        name: 'billInfo',
        initialState: {
           billList:[]
        },
        reducers: {
            setBillList(state,data){
                return Object.assign({}, state, {billList:data});
            }
        },
        effects: {
     
           requestBillList(){
               	T.fetch({				
                   url:"/bill/renewal/list.json",
                   data:{},
                    }).then((res)=>{
                        console.log(res)
                            if(res.success){                           
                                actions.billInfo.setBillList(res.value);  
                            }
                    });
           }
        }
    })
}

class App extends React.Component { 
	constructor(props) {
		super(props);
	}

	componentDidMount(){
        const {billList} = this.props;
        console.log(this.props)
        if(!billList || (billList && !billList.length)){
            actions.billInfo.requestBillList();
        }
		
    }

    toBillDetail = (policyNo, policyId) => {//跳转到账单详情
           actions.routing.push({
            pathname: 'bill-pay',
            search: '?policyNo='+ policyNo + "&policyId=" + policyId 
            })
    }  

    payRecords = () => { //跳转到缴费记录       
        actions.routing.push({
            pathname:'bill-payRecords',
        })
    }
	
	render() {
        const {billList} = this.props;            
		return (<div className="bill-info">  
              <Button type="ghost" inline size="small" 
                    className="recButton diy_color diy_border" 
                    style={{ marginRight: '4px',marginTop:'6px' }} 
                    onClick={this.payRecords}
                ><FormattedMessage id='pay_records' defaultMessage='缴费记录'/></Button>
            <List  className="my-list">
            {
                billList.map((item)=>
                <Item arrow="horizontal" multipleLine onClick={()=>this.toBillDetail(item.policyNo,item.policyId)} key={item.policyNo} id={item.policyNo}>
                {item.policyName} <Brief>{item.policyNo}</Brief>
                </Item>                
           )}
           </List>
	  	</div>)
	  }
}

export default connect(state => {
    return state.billInfo;
  })(App)